// 维护保养
<template>
    <f7-page
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
        class="common-page"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>维护保养</f7-nav-title>
            <!-- 查询参数图标 -->
            <f7-nav-right @click.native="showSearch = true">
                <img
                    src="../../../../assets/img/qzjx/filter.png"
                    alt="toolbar-icon"
                    style="width: 22px"
                />
            </f7-nav-right>
        </f7-navbar>
        <van-tabs v-model="activeIndex" @click="changeStatus()">
            <van-tab title="维保设备" name="1">
                <f7-list
                    media-list
                    class="search-list"
                    v-if="query.data.length > 0"
                >
                    <li
                        v-for="(item, index) in query.data"
                        :key="index"
                        @click="detail(1, item)"
                        class="content-box"
                    >
                        <img
                            :src="
                                require(`../../../../assets/img/qzjx/${item.equipmentType?item.equipmentType:'empty'}.png`)
                            "
                            alt=""
                            class="left-box"
                        />
                        <div class="right-box">
                            <div class="title-box">
                                <h3>
                                    {{ item.propertyCode }}
                                    <span
                                        v-if="item.workSiteCode"
                                        style="color: #8995ac; font-size: 14px"
                                        >【{{ item.workSiteCode }}】</span
                                    >
                                </h3>
                                <span
                                    class="status"
                                    :class="
                                        item.repairStatus != 4
                                            ? 'status-yellow'
                                            : ''
                                    "
                                    >{{
                                        item.repairStatus
                                            | DictItem(controlData.taskStatus)
                                    }}</span
                                >
                            </div>
                            <p>{{ item.engineeName || '--' }}</p>
                            <p>
                                最后维保：<span>{{
                                    showTime1(item.repairTime) || '--'
                                }}</span>
                            </p>
                        </div>
                    </li>
                </f7-list>
                <v-empty v-else description="暂无数据" />
            </van-tab>
            <van-tab title="维保记录" name="2">
                <f7-list
                    media-list
                    class="search-list"
                    v-if="query$1.data.length > 0"
                >
                    <li
                        v-for="(item, index) in query$1.data"
                        :key="index"
                        @click="detail(2, item)"
                        class="content-box"
                    >
                        <img
                            :src="
                                require(`../../../../assets/img/qzjx/${item.equipmentType||'empty'}.png`)
                            "
                            alt=""
                            class="left-box"
                        />
                        <div class="right-box">
                            <div class="title-box">
                                <h3>
                                    {{ item.propertyCode }}
                                    <span
                                        v-if="item.workSiteCode"
                                        style="color: #8995ac; font-size: 14px"
                                        >【{{ item.workSiteCode }}】</span
                                    >
                                </h3>
                                <span
                                    class="status"
                                    :class="
                                        item.repairStatus != 4
                                            ? 'status-yellow'
                                            : ''
                                    "
                                    >{{
                                        item.repairStatus
                                            | DictItem(controlData.taskStatus)
                                    }}</span
                                >
                            </div>
                            <p>{{ item.engineeName || '--' }}</p>
                            <p>
                                最后维保：<span>{{
                                    showTime1(item.repairTime) || '--'
                                }}</span>
                            </p>
                        </div>
                    </li>
                </f7-list>
                <v-empty v-else description="暂无数据" />
            </van-tab>
        </van-tabs>
        <f7-toolbar
            position="bottom"
            no-shadow
            class="fff"
            v-if="models.isRepairUnit"
        >
            <f7-button fill class="submit-btn" @click="goPlan()"
                >登记维保计划</f7-button
            >
        </f7-toolbar>
        <!-- 搜索 -->
        <v-popup-search
            v-model="showSearch"
            title="筛选"
            :searchData="searchData"
            @btn:click="searchBtn"
        ></v-popup-search>
        <!-- 搜索 end -->
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
import vPopupSearch from '@/libs/zjk/popup-search/qm-popup-search.vue'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: '/app/equipment/eqmRepair/getListModel',
            query: [
                '/app/equipment/eqmRepair/queryRepairDeviceList',
                '/app/equipment/eqmRepair/queryList',
            ],
        }
    }
    onInit() {
        this.setSearch("propertyId", this.$f7route.query.propertyId, "list")
        this.setSearch("propertyId", this.$f7route.query.propertyId, "list$1")
    }

    onBeforeQuery(type, conditions, params) {}

    onAfterQuery(type, isSuccess, result) {
        if (type == 'form') {
            if (result.controlData.equipmentType) {
                this.$data.searchData[1].columns =
                    result.controlData.equipmentType
            }
            if (result.controlData.taskStatus) {
                result.controlData.taskStatus.forEach((element) => {
                    element.code = element.value
                    element.name = element.name
                })
                this.$data.searchData[2].columns = result.controlData.taskStatus
            }
        }
        return result
    }

    mixin() {
        return {
            components: {
                vPopupSearch,
            },
            data() {
                return {
                    search: {},
                    showSearch: false,
                    // 搜索的配置
                    searchData: [
                        {
                            type: 'input2',
                            key: 'propertyCode',
                            placeholder: '产权备案编号、工程名称',
                        },
                        {
                            type: 'checkbox',
                            key: 'equipmentType',
                            label: '设备类型',
                            columns: [],
                        },
                        {
                            type: 'checkbox',
                            key: 'repairStatus',
                            label: '办理进度',
                            columns: [
                                {
                                    code: '待进场',
                                    name: '待进场',
                                },
                                {
                                    code: '待审核',
                                    name: '待审核',
                                },
                                {
                                    code: '已完成',
                                    name: '已完成',
                                },
                            ],
                        },
                        {
                            type: 'date-range',
                            label: '维保日期',
                            key: 'timeOfWarehousing',
                        },
                    ],
                    activeIndex: 1,
                }
            },
            methods: {
                showTime1(date) {
                    if (date) {
                        return formatter.formatDate(date, 'yyyy-MM-dd')
                    } else {
                        return '--'
                    }
                },
                changeStatus() {
                    window.localStorage.setItem('maintenanceIndex', this.activeIndex)
                    if (this.activeIndex == 1) {
                        this.searchQuery(this.search, 'list')
                    } else {
                        this.searchQuery(this.search, 'list$1')
                    }
                },
                searchBtn({ data }) {
                    if (data.timeOfWarehousing) {
                        let arr = data.timeOfWarehousing.split(',')
                        data.beginTime = arr[0]
                        data.endTime = arr[1]
                    } else {
                        data.beginTime = ''
                        data.endTime = ''
                    }
                    Object.assign(this.search, data)
                    if (this.activeIndex == 1) {
                        this.searchQuery(this.search, 'list')
                    } else {
                        this.searchQuery(this.search, 'list$1')
                    }
                },
                // 详情
                detail(index, item) {
                    if (index == 1) {
                        this.$f7router.navigate(
                            `/business/qzjx/maintenance/record?propertyId=${item.propertyId}&engineeId=${item.engineeId}`
                        )
                    } else {
                        this.$f7router.navigate(
                            `/business/qzjx/maintenance/create?pageAction=edit&repairId=${item.repairId}&useId=${item.useId}`
                        )
                    }
                },
                goPlan() {
                    this.$f7router.navigate(
                        `/business/qzjx/maintenance/create?pageAction=create`
                    )
                },
            },
            mounted() {
                this.activeIndex = window.localStorage.getItem("maintenanceIndex") 
            },
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');

.common-page @{deep}.van-tabs {
    .van-tabs__wrap {
        width: 100%;
        z-index: 99;
    }

    .van-tabs__line {
        width: 40px;
    }
}

.submit-btn {
    flex: 1;
    margin: 0 10px;
    border-radius: 24px;
}
</style>
